// tab切换
<template>
  <div class="box">
    <header class="header">
      <button class="icon-button" @click="goBack">
        <img src="../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png" alt="Back" />
      </button>
      <button class="icon-button" @click="openMessages">
        <i class="iconfont icon-lingdang"></i>
      </button>
    </header>
    <!-- tab切换 -->

    <div class="tabMain">
      <div class="title">
        <div class="tabBox">
          <div class="tabtitle" v-for="item in tabList" :key="item.id">
            <div @click="tabClick(item.rank)" class="titStyle">
              {{ item.departmentName }}
            </div>
          </div>
        </div>
      </div>

      <svg
        @click="gotoSearch"
        class="icon"
        fill="#2979ff"
        width="30"
        height="30"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21 20.293l-5.293-5.293C16.572 14.975 17 13.541 17 12a7 7 0 1 0-7 7c1.541 0 2.975-.428 3.999-1.293L21 20.293zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
        />
      </svg>
    </div>

    <div class="tabsdata">
      <div
        @click="goTo(item.pid)"
        style="margin: 25px"
        v-for="item in tabChildren"
        :key="item.id"
        class="ellipsis-multi-line"
      >
        <div class="title-text">
          <b>{{ item.title }}</b>
          {{ item.id }}
        </div>
        <p>{{ item.texts }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const tabList = ref([]);
const tabChildren = ref([]);
const defaultTabId = ref(null);

const router = useRouter();
const openMessages = () => {
  router.push("/Message");
};
const goBack = () => {
  router.go(-1);
};

// 获取 tab 数据
const getTab = async () => {
  try {
    const response = await axios.get(
      "http://172.27.6.151:32112/api/get/knowledgeBaseData"
    );
    console.log("tab", response.data.data);
    if (response.data.code === 200) {
      tabList.value = response.data.data;
      defaultTabId.value = tabList.value[0]?.rank; // 选择第一个 tab 作为默认选项
      if (defaultTabId.value) {
        await tabClick(defaultTabId.value); // 自动加载数据
      }
    }
  } catch (error) {
    console.error("获取 tab 数据失败", error);
  }
};

// tab 点击处理
const tabClick = async (id) => {
  console.log({ id }, "id");
  try {
    const response = await axios.get("http://172.27.6.151:32112/api/get/PatientData", {
      params: { id },
    });
    console.log(response, "response");
    console.log("病友数据", response.data.data[0].childer);
    tabChildren.value = response.data.data[0].childer;
    localStorage.setItem("searchdata", JSON.stringify(tabChildren.value));
  } catch (error) {
    console.error("获取病友数据失败", error);
  }
};
// 存储 pid 到 localStorage
const goTo = (pid) => {
  localStorage.setItem("pid", pid);
  router.push("/Dialog");
  // 注意：这里没有进行页面导航
};
// 跳转到搜索页面
const gotoSearch = () => {
  router.push("/Search");
};

// 组件挂载时获取 tab 数据
onMounted(() => {
  getTab();
});
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
}
.icon-button i {
  float: right;
  font-size: 23px;
  margin-top: 1px;
}
.icon-button img {
  width: 28px;
  height: 28px;
}

.title-text {
  font-weight: 700;
}
.loading::after {
  content: "Loading...";
  /* 其他样式 */
}
.tabMain {
  width: 100%;
  height: 50px;
  display: flex;
}

.title {
  width: 330px;
  height: 40px;
  overflow: auto;
}
.title::-webkit-scrollbar {
  display: none; /* 对于 Webkit 浏览器（如 Chrome 和 Safari）隐藏滚动条 */
}

.tabsdata {
  width: 100%;
  height: 500px;
  overflow: auto;
}
.tabsdata::-webkit-scrollbar {
  display: none; /* 对于 Webkit 浏览器（如 Chrome 和 Safari）隐藏滚动条 */
}
.tabBox {
  width: 330px;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.tabtitle {
  width: 100px !important;
  height: 35px;
  font-size: 16px;
  line-height: 35px;
}
.tabtitle::after {
  display: none;
}
.titStyle {
  width: 100px;
  margin-left: 20px;
}
.ellipsis-multi-line p {
  text-indent: 2em;
  line-height: 30px;
  letter-spacing: 2px;
}
.ellipsis-multi-line b {
  font-size: 16px;
}
.titStyle:hover {
  color: red;
  font-weight: 600;
}
.tabdata {
  padding: 10px;
}
.icon {
  margin-top: 5px;
}
</style>
